<template>
  <div class="container">
    <div class="container">
      <div class="seachAndState">
        <el-form
          size="small"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="时间粒度">
            <el-select v-model="formInline.time" placeholder="选择时间段">
              <el-option label="分钟" value="Min"></el-option>
              <el-option label="十五分钟" value="Fifteen"></el-option>
              <!-- <el-option label="十分钟" value="Ten"></el-option>
              <el-option label="三十分钟" value="Thirty"></el-option> -->
              <el-option label="一小时" value="Hour"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="formInline.time !== 'Min' && formInline.time !== 'Fifteen'"
            label="数据"
          >
            <el-select v-model="formInline.data" placeholder="选择时间段">
              <el-option label="平均值" value="平均值"></el-option>
              <el-option label="最小值" value="最小值"></el-option>
              <el-option label="最大值" value="最大值"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker
              v-model="formInline.timeLine"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd hh:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="getAllData(onGetData, 'notChangePage')"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div class="stateClass">
          状态:
          <div
            v-if="this.deviceStatus"
            :class="judgeState ? 'greenLight' : 'redLight'"
          ></div>
          <div style="font-size: 0.9rem; margin-top: 3px">
            {{ this.deviceStatus }}
          </div>
        </div>
      </div>
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column fixed label="工艺名称" align="center">
          石墨化
        </el-table-column>
        <el-table-column fixed align="center" label="时间" width="155">
          <template slot-scope="{ row }">
            {{ row.createTime }}
          </template>
        </el-table-column>
        <div v-if="control.show && tableData.length !== 0">
          <el-table-column
            align="center"
            v-for="(item, index) in tableData[0].data[control.data]"
            :key="index"
          >
            <template slot="header" slot-scope="">
              <!-- <div class="tableHead">{{item.key.slice(0,-3)}}</div> -->
              <div class="tableHead">{{ item.key }}</div>
              <div class="tableHead">({{ item.unit }})</div>
            </template>
            <template slot-scope="{ row }">
              <div>
                {{ row.data[control.data][index].value }}
              </div>
            </template>
          </el-table-column>
        </div>
        <div v-if="!control.show && tableData.length !== 0">
          <el-table-column
            align="center"
            v-for="(item, index) in tableData[0].data"
            :key="index"
          >
            <template slot="header" slot-scope="">
              <div class="tableHead">{{ item.key }}</div>
              <div class="tableHead">({{ item.unit }})</div>
            </template>
            <template slot-scope="{ row }">
              <div>
                {{ row.data[index].value }}
              </div>
            </template>
          </el-table-column>
        </div>
      </el-table>
      <div
        v-if="tableData.length !== 0"
        class="block"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30, 40]"
          :currPage-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// getGraphData
import { getGraphData } from "@/api/dataCenter.js";
// import Vue from 'vue'
export default {
  name: "graphContent",
  data() {
    return {
      pageSize: 10,
      currPage: 1,
      total: null,
      boxId: "be67c2b8216e49e8981a95663413f115",
      control: {
        data: "",
        show: false,
      },
      formInline: {
        data: "平均值",
        time: "Min",
        timeLine: null,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      tableData: [],
      deviceStatus: null,
    };
  },
  mounted() {
    this.getAllData();
  },
  computed: {
    judgeState() {
      if (this.deviceStatus === "正常") {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    onGetData(res) {
      this.$message({
        customClass: "mess-info",
        message: res.message,
      });
    },
    getAllData(onGetData, ret) {
      const that = this;
      if (that.formInline.timeLine === null)
        that.formInline.timeLine = ["", ""];
      if (ret === "notChangePage") {
        this.currPage = 1;
      }
      const params = {
        BoxId: this.boxId,
        pageSize: that.pageSize,
        currPage: that.currPage,
        dataTime: that.formInline.time,
        startTime: that.formInline.timeLine[0],
        endTime: that.formInline.timeLine[1],
      };
      if (
        that.formInline.time === "Min" ||
        that.formInline.time === "Fifteen"
      ) {
        that.control.show = false;
      } else {
        that.control.show = true;
        that.control.data = that.formInline.data;
      }
      console.log("paramsparams", params);
      getGraphData(params)
        .then((res) => {
          console.log("石墨化的", res);
          // that.tableData = []
          if (res.data.code === 200) {
            // console.log('石墨', res)
            that.tableData = res.data.data.dataSet;
            that.total = res.data.data.totalCount;
            // that.currPage = params.currPage
            that.deviceStatus = res.data.data.deviceStatus;
          }
          if (onGetData) onGetData(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllData();
    },
    handleCurrentChange(val) {
      console.log("valval", val);
      this.currPage = val;
      this.getAllData();
    },
  },
};
</script>

<style  scoped>
.seachAndState {
  display: flex;
  justify-content: space-between;
  .stateClass {
    display: flex;
    height: 100%;
    padding: 5px 10px 10px 20px;
    width: 200px;
    .greenLight {
      margin: 6px 3px 4px 15px;
      width: 0.7rem;
      height: 0.7rem;
      background-color: rgb(133, 231, 163);
      border-radius: 0.4rem;
      border: 1px solid rgba(41, 241, 101, 0.349);
    }
    .redLight {
      margin: 6px 3px 4px 15px;
      width: 0.7rem;
      height: 0.7rem;
      background-color: rgb(219, 99, 99);
      border-radius: 0.4rem;
      border: 1px solid rgba(241, 148, 41, 0.349);
    }
  }
}
</style>
